<template>
  <div class="container">
    <van-nav-bar
      title="我的分享"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      />
      <van-empty v-if="articleData && articleData.length < 1" description="暂无分享" />
    <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
      <!-- 左边图片 -->
      <div class="content_img">
          <img :src="bookSrc">
      </div>
      <div style="margin-left: 10px;">
          <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
          <p >{{article.title}}</p>
          <p><span>点赞数：</span><span>{{article.count}}&nbsp;&nbsp;&nbsp;</span><span>
            <van-tag v-if="article.status === 'draft'" type="primary">正在审核中</van-tag> 
            <van-tag v-else type="success">审核通过</van-tag> 
          </span></p>
          <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
      </div>
    </div>
    <div class="pagination">
      <van-pagination v-model="currentPage" @change="currentPageHandel" :total-items="pageTotal" :items-per-page="4" />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import Article from "../js/Article";

export default {
  data() {
    return{
      articleData:[],
      currentPage:1,
      pageSize:5,
      pageNum:1,
      pageTotal:0,
      bookSrc:require('../../assets/book.jpg'),
      niceSrc:require('../../assets/dianzan.png'),
    }
  },
  computed:{
  },
  methods:{
    // 获取自己文章列表
    getMyArticle(value){
      let id = this.$store.state.user.userInfo.id
      let requestBody = {
        id:id,
        pageSize:this.pageSize,
        pageNum:value
      }
      Article.getMyArticle(requestBody).then(res =>{
        if(res.data.code === 0){
          this.articleData = res.data.data.list
          this.pageNum = value
          this.pageTotal = res.data.data.Total
        }else{
          Toast.fail('未知错误');
        }
      })
    },
    // 跳转到文章详情界面
    getArticleDetail(id){
        this.$router.push({path:'/manager/detail',query: {id: id}})
    },
    // 返回上一页
    onClickLeft(){
      this.$router.go(-1)
    },
    // 分页
    currentPageHandel(){
      this.getMyArticle(this.currentPage)
    }
  },
  mounted(){
    this.getMyArticle(1)
  }
}
</script>

<style scoped lang="less">
.container{
  .content_img img {
        position: relative;
        top: 14px;
        width: 120px;
        height: 80px;
    }

  .content {
      display: flex;
      border-bottom: 1px solid #ccc;
      padding: 10px;
      background-color: #fff;

  }
  .van-nav-bar{
    background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
    height: 55px;
  }
  
}

</style>